<template>
  <div class="container">
    <Header :headerHeight="headerHeights" title="今日经营" @doBack="doBack" @doRightClick="doRightClick(title)"
      rightText="推荐给同事" class="header"></Header>
    <div class="content" :style="{ height: contentHeight }">
      <div class="topic">
        <div class="topic-title">{{ title }}</div>
        <TextEllipsis :content="screenplay" single @clickExpand="clickExpand">
        </TextEllipsis>
      </div>
      <div class="shoot" v-if="itemVoList.length !== 0">
        <div class="shoot-title">大家都在拍</div>
        <div class="shoot-video">
          <div class="video-list" v-for="(item, index) in itemVoList" :key="index" v-if="itemVoList">
            <div class="video-item">
              <img class="video" @click="clickVideo(item.id, '')" :src="item.cover">
            </div>
            <div class="bottom">
              <div class="video-title double-ellipsis">{{ item.title }}</div>
              <div class="avatar"></div>
              <div class="author">{{ item.authorNickname }}</div>
            </div>
          </div>
        </div>
      </div>
      <button class="btn" @click="goFollowShot(route.query.shortVideoTraceId, '')">去跟拍</button>
    </div>
  </div>
  <Loading v-if="pageLoading"></Loading>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { reqEverybodyShortVideo } from "../api";
import Header from '../components/NewNavbar.vue'
import { share, collectEvent } from "@/../utils/bridge"
import { getAccountInfos, headerHeight } from "@/../utils";
import { Toast } from 'vant';
import "vant/es/toast/style";
import Loading from "../components/Loading.vue";
import TextEllipsis from "../components/TextEllipsis.vue";
const route = useRoute();
const screenplay = ref("");
const title = ref("");
const pageLoading = ref(false);
screenplay.value = route.query.shortVideoScreenplay
title.value = route.query.shortVideoTitle

// 定义头部及内容高度
let headerHeights = ref('44px')
if (headerHeight) {
  headerHeights.value = headerHeight()
}
const contentHeight = ref('100vh')
contentHeight.value = `calc(100vh - ${headerHeights.value})`
const doBack = () => {
  history.back();
}

// 获取大家都在拍
const itemVoList = ref([]);
const getEverybody = async (userId) => {
  const { code, data, msg } = await reqEverybodyShortVideo(userId, route.query.shortVideoTraceId);
  console.log(">>>> route.query.shortVideoTraceId >>>>", route.query.shortVideoTraceId);
  if (code == 0 && data.result) {
    console.log(">>>> 大家都在拍内容 >>>>", data.result.itemVoList);
    itemVoList.value.push(...data.result.itemVoList)
  }
  if (code != 0) {
    Toast(`数据或网络异常\ncode${code} ${msg}`);
  }
}

// 点击展开（埋点）
const clickExpand = () => {
  setTimeout(() => {
    traceOperateShowText(route.query.shortVideoTraceId)
  }, 500)
}

// 点击大家都在拍视频
const clickVideo = (id, channel, from = "IpWorkshop") => {
  const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  setTimeout(() => {
    traceOperateClickVideo(id)
  }, 500)
  if (isIos) {
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1106?isVideoList=1&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${id}&directClose=1&requestCode=10001`;
  } else {
    const routerPath = `aipage://1106?isVideoList=1&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${id}&directClose=1&requestCode=10001`;
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1125?from=${from}&pageIndex=1&firstTabIndex=0&_coparams={"routerUrl":"${routerPath}"}`;
  }
};

// 去跟拍
const goFollowShot = (id, channel, from = "IpWorkshop") => {
  const isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  setTimeout(() => {
    traceOperateGoVideo(route.query.shortVideoTraceId)
  }, 500)
  console.log(">>>> route.query.shortVideoTraceId >>>>", route.query.shortVideoTraceId);
  if (isIos) {
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1105?isVideoList=1&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${route.query.shortVideoTraceId}&directClose=1&requestCode=10001`;
  } else {
    const routerPath = `aipage://1105?isVideoList=1&needPreload=1&iOSNeedPush=1&tabKey=${channel}&videoId=${route.query.shortVideoTraceId}&directClose=1&requestCode=10001`;
    window.location.href = `https://esales-local/ask_bob#visit?encodeJumpUrl=aipage://1125?from=${from}&pageIndex=1&firstTabIndex=0&_coparams={"routerUrl":"${routerPath}"}`;
  }
}

// 分享按钮事件
const doRightClick = (title) => {
  console.log("shareTitle", title);
  let url = `${window.location.origin}${window.location.pathname}#/todayOperate?aiWebVersion=2&airules=01-00`
  url = "encodeJumpUrl=" + encodeURIComponent(url)
  share({
    url:
      "https://salescmscdn.pa18.com/appStatic/lifeshare/mixin/openKdeApp/open.html?action=esales-local&from=other&url=https://esales-local/ask_bob#visit?" +
      url,
    title,
    icon: '',
    description: '我发现了一条不错的短视频内容，快来一起拍吧'
  })
  setTimeout(() => {
    traceShare(userId.value, route.query.shortVideoTraceId)
  }, 500)
}

// 挂载获取数据
const userId = ref("");
onMounted(async () => {
  const { agentNo } = await getAccountInfos();
  userId.value = agentNo
  pageLoading.value = true;
  await getEverybody(userId.value);
  pageLoading.value = false;
});

</script>

<style lang="less" scoped>
.header {
  overflow: hidden;
}

.content {
  width: 100%;
  // overflow: scroll;
  -webkit-overflow-scroll: touch;
}

.container {
  background-color: #f7f7f7;
  overflow-x: hidden;

  .topic {
    width: 100vw;
    max-height: 999px;
    padding: 15px;
    background-color: #fff;

    .topic-title {
      width: 345px;
      height: 22px;
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #000000;
      text-align: justify;
      font-weight: 500;
      margin-bottom: 17px;
    }

    .topic-content {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #000000;
      text-align: justify;
      font-weight: 400;

      :deep(.van-text-ellipsis__action) {
        display: block;
        text-align: right;
        font-family: PingFangSC-Regular;
        font-size: 13px;
        color: #FF7744;
        letter-spacing: 0;
        font-weight: 400;
      }
    }
  }

  .shoot {
    width: 100vw;
    height: 387px;
    padding-top: 15px;
    background: #fff;
    margin-top: 10px;

    .shoot-title {
      font-family: PingFangSC-Medium;
      font-size: 16px;
      color: #000000;
      letter-spacing: 0;
      font-weight: 500;
      margin-left: 15px;
    }

    .shoot-video {
      min-width: 375px;
      height: 335px;
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      margin-left: 10px;
      margin-top: 15px;
      padding-right: 50px; //
      -ms-overflow-style: none;
      scrollbar-width: none;

      &::-webkit-scrollbar {
        display: none;
      }

      .video-list {
        width: 170px;
        height: 318.72px;
        border-radius: 6px;
        margin-bottom: 10px;
        position: relative;
        margin-right: 10px;

        .loading {
          height: 54px;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -80%);
          opacity: 0.4;
          font-family: PingFangSC-Medium;
          font-size: 14px;
          color: #000000;
          letter-spacing: 0;
          text-align: center;
          font-weight: 500;
          display: flex;
          align-items: flex-end;
        }

        .video-data {
          position: absolute;
          left: 9.1px;
          top: 216.21px;
          height: 20px;
          padding: 0 10.12px;
          background: rgba(0, 0, 0, 0.50);
          border-radius: 10px;
          font-family: DINAlternate-Bold;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 16px;
          font-weight: 700;

          span {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #FFFFFF;
            line-height: 16px;
            font-weight: 400;
          }
        }

        .bottom {
          width: 100%;
          height: 79px;
          position: absolute;
          bottom: 0;

          .video-title {
            margin-top: 8px;
            font-family: PingFangSC-Regular;
            font-size: 14.17px;
            color: #000000;
            letter-spacing: 0;
            text-align: justify;
            line-height: 20.24px;
            font-weight: 400;
          }

          .avatar {
            width: 20.24px;
            height: 20.24px;
            position: absolute;
            margin-top: 5px;
            left: 0px;
            top: 45px;
            background: url("../asset/icons/avatar_default.png") no-repeat;
            background-size: 100% 100% !important;
          }

          .author {
            position: absolute;
            left: 28px;
            top: 45px;
            margin-top: 5px;
            opacity: 0.6;
            font-family: PingFangSC-Regular;
            font-size: 13.15px;
            color: #000000;
            letter-spacing: 0;
            line-height: 20.24px;
            font-weight: 400;
          }
        }

        .video-item {
          width: 170px;
          height: 245px;
          background: #F0F2F5;
          border-radius: 6px;


          .video {
            object-fit: cover;
            object-position: top;
            border-radius: 6px;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

}

.btn {
  width: 315px;
  height: 50px;
  background: #FF7744;
  border-radius: 25px;
  position: fixed;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #FFFFFF;
  text-align: center;
  font-weight: 500;
}
</style>